<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="报警编号" prop="alarmCode">
        <el-input
          v-model="queryParams.alarmCode"
          placeholder="请输入报警编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报警类型" prop="alarmType">
        <el-select v-model="queryParams.alarmType" placeholder="请选择报警类型" clearable>
          <el-option label="校园欺凌" value="1"/>
          <el-option label="暴力事件" value="2"/>
          <el-option label="威胁恐吓" value="3"/>
          <el-option label="财物损失" value="4"/>
          <el-option label="其他安全事件" value="5"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报警级别" prop="alarmLevel">
        <el-select v-model="queryParams.alarmLevel" placeholder="请选择报警级别" clearable>
          <el-option label="一般" value="1"/>
          <el-option label="较重" value="2"/>
          <el-option label="严重" value="3"/>
          <el-option label="特别严重" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态" prop="handleStatus">
        <el-select v-model="queryParams.handleStatus" placeholder="请选择处理状态" clearable>
          <el-option label="待处理" value="0"/>
          <el-option label="已分配" value="1"/>
          <el-option label="处理中" value="2"/>
          <el-option label="已完成" value="3"/>
          <el-option label="已关闭" value="8"/>
          <el-option label="已取消" value="9"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否紧急" prop="isEmergency">
        <el-select v-model="queryParams.isEmergency" placeholder="是否紧急" clearable>
          <el-option label="是" :value="true"/>
          <el-option label="否" :value="false"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报警时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 快捷筛选 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="2">
        <el-button
          type="danger"
          plain
          size="mini"
          @click="handleEmergencyFilter"
          icon="el-icon-warning"
        >紧急报警</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="warning"
          plain
          size="mini"
          @click="handlePendingFilter"
          icon="el-icon-time"
        >待处理</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleTodayFilter"
          icon="el-icon-date"
        >今日报警</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          size="mini"
          @click="resetQuery"
          icon="el-icon-refresh"
        >全部</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleAssign"
          v-hasPermi="['campus:alarm:assign']"
        >分配处理</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="single"
          @click="handleStart"
          v-hasPermi="['campus:alarm:handle']"
        >开始处理</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['campus:alarm:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="alarmList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="报警编号" align="center" prop="alarmCode" width="150"/>
      <el-table-column label="报警标题" align="center" prop="alarmTitle" :show-overflow-tooltip="true" width="200"/>
      <el-table-column label="报警类型" align="center" prop="alarmType" width="100">
        <template slot-scope="scope">
          <el-tag :type="getAlarmTypeTagType(scope.row.alarmType)">
            {{ getAlarmTypeName(scope.row.alarmType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="报警级别" align="center" prop="alarmLevel" width="100">
        <template slot-scope="scope">
          <el-tag :type="getAlarmLevelTagType(scope.row.alarmLevel)">
            {{ getAlarmLevelName(scope.row.alarmLevel) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="紧急程度" align="center" prop="isEmergency" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isEmergency" type="danger" size="mini">紧急</el-tag>
          <el-tag v-else type="info" size="mini">普通</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="报警人" align="center" prop="reporterName" width="100"/>
      <el-table-column label="报警时间" align="center" prop="alarmTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理状态" align="center" prop="handleStatus" width="100">
        <template slot-scope="scope">
          <el-tag :type="getHandleStatusTagType(scope.row.handleStatus)">
            {{ getHandleStatusName(scope.row.handleStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="处理人" align="center" prop="handlerName" width="100"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-hasPermi="['campus:alarm:query']"
          >详情</el-button>
          <el-button
            v-if="scope.row.handleStatus === 0"
            size="mini"
            type="text"
            icon="el-icon-user"
            @click="handleAssign(scope.row)"
            v-hasPermi="['campus:alarm:assign']"
          >分配</el-button>
          <el-button
            v-if="scope.row.handleStatus === 1"
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="handleStart(scope.row)"
            v-hasPermi="['campus:alarm:handle']"
          >开始处理</el-button>
          <el-button
            v-if="scope.row.handleStatus === 2"
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="handleComplete(scope.row)"
            v-hasPermi="['campus:alarm:handle']"
          >完成</el-button>
          <el-dropdown v-if="scope.row.handleStatus < 3" @command="(command) => handleMoreAction(command, scope.row)">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="transfer" icon="el-icon-sort">转接</el-dropdown-item>
              <el-dropdown-item command="upgrade" icon="el-icon-top">升级</el-dropdown-item>
              <el-dropdown-item command="close" icon="el-icon-close">关闭</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 报警详情对话框 -->
    <el-dialog title="报警详情" :visible.sync="detailOpen" width="1200px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="报警编号">{{ detailForm.alarmCode }}</el-descriptions-item>
            <el-descriptions-item label="报警标题">{{ detailForm.alarmTitle }}</el-descriptions-item>
            <el-descriptions-item label="报警类型">
              <el-tag :type="getAlarmTypeTagType(detailForm.alarmType)">
                {{ getAlarmTypeName(detailForm.alarmType) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="报警级别">
              <el-tag :type="getAlarmLevelTagType(detailForm.alarmLevel)">
                {{ getAlarmLevelName(detailForm.alarmLevel) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否紧急">
              <el-tag :type="detailForm.isEmergency ? 'danger' : 'info'">
                {{ detailForm.isEmergency ? '紧急' : '普通' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="处理状态">
              <el-tag :type="getHandleStatusTagType(detailForm.handleStatus)">
                {{ getHandleStatusName(detailForm.handleStatus) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="报警时间">{{ detailForm.alarmTime }}</el-descriptions-item>
            <el-descriptions-item label="事件时间">{{ detailForm.incidentTime }}</el-descriptions-item>
            <el-descriptions-item label="报警人">{{ detailForm.reporterName || '匿名' }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ detailForm.reporterPhone || '-' }}</el-descriptions-item>
            <el-descriptions-item label="事件位置" :span="2">{{ detailForm.incidentLocation }}</el-descriptions-item>
            <el-descriptions-item label="报警内容" :span="2">{{ detailForm.alarmContent }}</el-descriptions-item>
            <el-descriptions-item label="目击者信息" :span="2">{{ detailForm.witnessInfo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="处理人">{{ detailForm.handlerName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="处理结果">{{ detailForm.handleResult || '-' }}</el-descriptions-item>
          </el-descriptions>
          
          <!-- 附件展示 -->
          <div v-if="detailForm.imageFileUrls || detailForm.audioFileUrl || detailForm.videoFileUrl" style="margin-top: 20px;">
            <h4>相关附件</h4>
            <el-row :gutter="10">
              <el-col v-if="detailForm.imageFileUrls" :span="8">
                <h5>图片文件</h5>
                <el-image
                  v-for="(img, index) in parseFileUrls(detailForm.imageFileUrls)"
                  :key="index"
                  :src="img"
                  style="width: 100px; height: 100px; margin: 5px;"
                  :preview-src-list="parseFileUrls(detailForm.imageFileUrls)"
                />
              </el-col>
              <el-col v-if="detailForm.audioFileUrl" :span="8">
                <h5>音频文件</h5>
                <audio controls style="width: 100%;">
                  <source :src="detailForm.audioFileUrl" type="audio/mpeg">
                  您的浏览器不支持音频播放。
                </audio>
              </el-col>
              <el-col v-if="detailForm.videoFileUrl" :span="8">
                <h5>视频文件</h5>
                <video controls style="width: 100%; max-height: 200px;">
                  <source :src="detailForm.videoFileUrl" type="video/mp4">
                  您的浏览器不支持视频播放。
                </video>
              </el-col>
            </el-row>
          </div>
        </el-col>
        
        <!-- 处理流程时间线 -->
        <el-col :span="8">
          <h4>处理流程</h4>
          <el-timeline>
            <el-timeline-item
              timestamp="报警提交"
              :color="detailForm.alarmTime ? '#67C23A' : '#909399'"
            >
              <p>{{ detailForm.alarmTime || '未开始' }}</p>
              <p v-if="detailForm.reporterName">报警人：{{ detailForm.reporterName }}</p>
            </el-timeline-item>
            <el-timeline-item
              timestamp="分配处理人"
              :color="detailForm.handlerName ? '#67C23A' : '#909399'"
            >
              <p>{{ detailForm.handlerName ? '已分配' : '待分配' }}</p>
              <p v-if="detailForm.handlerName">处理人：{{ detailForm.handlerName }}</p>
            </el-timeline-item>
            <el-timeline-item
              timestamp="开始处理"
              :color="detailForm.handleStartTime ? '#67C23A' : '#909399'"
            >
              <p>{{ detailForm.handleStartTime || '未开始' }}</p>
            </el-timeline-item>
            <el-timeline-item
              timestamp="处理完成"
              :color="detailForm.handleEndTime ? '#67C23A' : '#909399'"
            >
              <p>{{ detailForm.handleEndTime || '未完成' }}</p>
              <p v-if="detailForm.handleResult">结果：{{ detailForm.handleResult }}</p>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 分配处理人对话框 -->
    <el-dialog title="分配处理人" :visible.sync="assignOpen" width="500px" append-to-body>
      <el-form ref="assignForm" :model="assignForm" label-width="100px">
        <el-form-item label="处理人" prop="handlerUserId">
          <el-select v-model="assignForm.handlerUserId" placeholder="请选择处理人" style="width: 100%">
            <el-option
              v-for="user in handlerList"
              :key="user.userId"
              :label="user.nickName"
              :value="user.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分配备注" prop="remark">
          <el-input v-model="assignForm.remark" type="textarea" placeholder="请输入分配备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAssign">确 定</el-button>
        <el-button @click="assignOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 完成处理对话框 -->
    <el-dialog title="完成处理" :visible.sync="completeOpen" width="600px" append-to-body>
      <el-form ref="completeForm" :model="completeForm" label-width="100px">
        <el-form-item label="处理结果" prop="handleResult">
          <el-input v-model="completeForm.handleResult" type="textarea" rows="4" placeholder="请输入处理结果"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitComplete">确 定</el-button>
        <el-button @click="completeOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 转接对话框 -->
    <el-dialog title="转接报警" :visible.sync="transferOpen" width="500px" append-to-body>
      <el-form ref="transferForm" :model="transferForm" label-width="100px">
        <el-form-item label="转接给" prop="newHandlerUserId">
          <el-select v-model="transferForm.newHandlerUserId" placeholder="请选择转接人" style="width: 100%">
            <el-option
              v-for="user in handlerList"
              :key="user.userId"
              :label="user.nickName"
              :value="user.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="转接原因" prop="transferReason">
          <el-input v-model="transferForm.transferReason" type="textarea" placeholder="请输入转接原因"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTransfer">确 定</el-button>
        <el-button @click="transferOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 升级对话框 -->
    <el-dialog title="升级报警级别" :visible.sync="upgradeOpen" width="500px" append-to-body>
      <el-form ref="upgradeForm" :model="upgradeForm" label-width="100px">
        <el-form-item label="新级别" prop="newLevel">
          <el-select v-model="upgradeForm.newLevel" placeholder="请选择新级别" style="width: 100%">
            <el-option label="一般" :value="1"/>
            <el-option label="较重" :value="2"/>
            <el-option label="严重" :value="3"/>
            <el-option label="特别严重" :value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item label="升级原因" prop="upgradeReason">
          <el-input v-model="upgradeForm.upgradeReason" type="textarea" placeholder="请输入升级原因"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpgrade">确 定</el-button>
        <el-button @click="upgradeOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 关闭对话框 -->
    <el-dialog title="关闭报警" :visible.sync="closeOpen" width="500px" append-to-body>
      <el-form ref="closeForm" :model="closeForm" label-width="100px">
        <el-form-item label="关闭原因" prop="closeReason">
          <el-input v-model="closeForm.closeReason" type="textarea" placeholder="请输入关闭原因"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClose">确 定</el-button>
        <el-button @click="closeOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  listAlarm, 
  getAlarmDetail, 
  assignAlarmHandler, 
  startHandleAlarm, 
  completeAlarmHandle,
  transferAlarm,
  upgradeAlarmLevel,
  closeAlarm,
  exportAlarm
} from "@/api/campus/alarm";
import { listUser } from "@/api/system/user";

export default {
  name: "Alarm",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 报警记录表格数据
      alarmList: [],
      // 处理人列表
      handlerList: [],
      // 弹出层标题
      title: "",
      // 是否显示详情弹出层
      detailOpen: false,
      // 是否显示分配弹出层
      assignOpen: false,
      // 是否显示完成弹出层
      completeOpen: false,
      // 是否显示转接弹出层
      transferOpen: false,
      // 是否显示升级弹出层
      upgradeOpen: false,
      // 是否显示关闭弹出层
      closeOpen: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        alarmCode: null,
        alarmType: null,
        alarmLevel: null,
        handleStatus: null,
        isEmergency: null,
        beginTime: null,
        endTime: null
      },
      // 详情表单参数
      detailForm: {},
      // 分配表单参数
      assignForm: {},
      // 完成表单参数
      completeForm: {},
      // 转接表单参数
      transferForm: {},
      // 升级表单参数
      upgradeForm: {},
      // 关闭表单参数
      closeForm: {},
      // 当前操作的报警ID
      currentAlarmId: null
    };
  },
  created() {
    this.getList();
    this.getHandlerList();
  },
  methods: {
    /** 查询报警记录列表 */
    getList() {
      this.loading = true;
      this.queryParams.beginTime = this.dateRange[0];
      this.queryParams.endTime = this.dateRange[1];
      listAlarm(this.queryParams).then(response => {
        this.alarmList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取处理人列表 */
    getHandlerList() {
      listUser({ 
        pageNum: 1, 
        pageSize: 100,
        status: '0' // 只获取正常状态的用户
      }).then(response => {
        this.handlerList = response.rows;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 紧急报警筛选 */
    handleEmergencyFilter() {
      this.resetQuery();
      this.queryParams.isEmergency = true;
      this.handleQuery();
    },
    /** 待处理报警筛选 */
    handlePendingFilter() {
      this.resetQuery();
      this.queryParams.handleStatus = 0;
      this.handleQuery();
    },
    /** 今日报警筛选 */
    handleTodayFilter() {
      const today = this.parseTime(new Date(), '{y}-{m}-{d}');
      this.dateRange = [today, today];
      this.resetQuery();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.alarmId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      const alarmId = row.alarmId;
      getAlarmDetail(alarmId).then(response => {
        this.detailForm = response.data;
        this.detailOpen = true;
      });
    },
    /** 分配按钮操作 */
    handleAssign(row) {
      this.currentAlarmId = row ? row.alarmId : this.ids[0];
      this.assignForm = {
        handlerUserId: null,
        remark: ''
      };
      this.assignOpen = true;
    },
    /** 提交分配 */
    submitAssign() {
      if (!this.assignForm.handlerUserId) {
        this.$modal.msgError("请选择处理人");
        return;
      }
      assignAlarmHandler(this.currentAlarmId, this.assignForm.handlerUserId).then(response => {
        this.$modal.msgSuccess("分配成功");
        this.assignOpen = false;
        this.getList();
      });
    },
    /** 开始处理按钮操作 */
    handleStart(row) {
      const alarmId = row ? row.alarmId : this.ids[0];
      this.$modal.confirm('确认要开始处理该报警吗？').then(function() {
        return startHandleAlarm(alarmId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    /** 完成按钮操作 */
    handleComplete(row) {
      this.currentAlarmId = row.alarmId;
      this.completeForm = {
        handleResult: ''
      };
      this.completeOpen = true;
    },
    /** 提交完成 */
    submitComplete() {
      if (!this.completeForm.handleResult) {
        this.$modal.msgError("请输入处理结果");
        return;
      }
      completeAlarmHandle(this.currentAlarmId, this.completeForm.handleResult).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.completeOpen = false;
        this.getList();
      });
    },
    /** 更多操作 */
    handleMoreAction(command, row) {
      this.currentAlarmId = row.alarmId;
      
      switch(command) {
        case 'transfer':
          this.transferForm = {
            newHandlerUserId: null,
            transferReason: ''
          };
          this.transferOpen = true;
          break;
        case 'upgrade':
          this.upgradeForm = {
            newLevel: row.alarmLevel + 1,
            upgradeReason: ''
          };
          this.upgradeOpen = true;
          break;
        case 'close':
          this.closeForm = {
            closeReason: ''
          };
          this.closeOpen = true;
          break;
      }
    },
    /** 提交转接 */
    submitTransfer() {
      if (!this.transferForm.newHandlerUserId || !this.transferForm.transferReason) {
        this.$modal.msgError("请填写完整信息");
        return;
      }
      transferAlarm(
        this.currentAlarmId, 
        this.transferForm.newHandlerUserId, 
        this.transferForm.transferReason
      ).then(response => {
        this.$modal.msgSuccess("转接成功");
        this.transferOpen = false;
        this.getList();
      });
    },
    /** 提交升级 */
    submitUpgrade() {
      if (!this.upgradeForm.newLevel || !this.upgradeForm.upgradeReason) {
        this.$modal.msgError("请填写完整信息");
        return;
      }
      upgradeAlarmLevel(
        this.currentAlarmId,
        this.upgradeForm.newLevel,
        this.upgradeForm.upgradeReason
      ).then(response => {
        this.$modal.msgSuccess("升级成功");
        this.upgradeOpen = false;
        this.getList();
      });
    },
    /** 提交关闭 */
    submitClose() {
      if (!this.closeForm.closeReason) {
        this.$modal.msgError("请输入关闭原因");
        return;
      }
      closeAlarm(this.currentAlarmId, this.closeForm.closeReason).then(response => {
        this.$modal.msgSuccess("关闭成功");
        this.closeOpen = false;
        this.getList();
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('campus/alarm/export', {
        ...this.queryParams
      }, `alarm_${new Date().getTime()}.xlsx`)
    },
    /** 解析文件URLs */
    parseFileUrls(urls) {
      if (!urls) return [];
      try {
        return JSON.parse(urls);
      } catch (e) {
        return [];
      }
    },
    /** 获取报警类型名称 */
    getAlarmTypeName(type) {
      const types = {
        1: '校园欺凌',
        2: '暴力事件', 
        3: '威胁恐吓',
        4: '财物损失',
        5: '其他安全事件'
      };
      return types[type] || '未知';
    },
    /** 获取报警类型标签类型 */
    getAlarmTypeTagType(type) {
      const types = {
        1: 'danger',
        2: 'danger',
        3: 'warning',
        4: 'info',
        5: 'info'
      };
      return types[type] || '';
    },
    /** 获取报警级别名称 */
    getAlarmLevelName(level) {
      const levels = {
        1: '一般',
        2: '较重',
        3: '严重',
        4: '特别严重'
      };
      return levels[level] || '未知';
    },
    /** 获取报警级别标签类型 */
    getAlarmLevelTagType(level) {
      const levels = {
        1: 'info',
        2: 'warning',
        3: 'danger',
        4: 'danger'
      };
      return levels[level] || '';
    },
    /** 获取处理状态名称 */
    getHandleStatusName(status) {
      const statuses = {
        0: '待处理',
        1: '已分配',
        2: '处理中',
        3: '已完成',
        8: '已关闭',
        9: '已取消'
      };
      return statuses[status] || '未知';
    },
    /** 获取处理状态标签类型 */
    getHandleStatusTagType(status) {
      const statuses = {
        0: 'danger',
        1: 'warning',
        2: 'primary',
        3: 'success',
        8: 'info',
        9: 'info'
      };
      return statuses[status] || '';
    }
  }
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-dropdown-link:hover {
  color: #66b1ff;
}
</style> 